import React, { useContext } from 'react'
import { TodoContext } from '../../todoContext'

const Item = (props) => {
    const { list, setList } = useContext(TodoContext);
    const { title, done } = props.detail;
    const deleteItem = () => {
        const { id } = props.detail;
        setList(list => list.filter(item => item.id !== id))
    }
    const changeStatus = () => {
        const { id } = props.detail;
        list.map(item => {
            if (item.id == id) {
                item.done = !item.done
            }
        })
        setList(list => [...list]);
    }
    return (
        <li><input type='checkbox' onChange={changeStatus} checked={done} /> {title}<button onClick={deleteItem}>删除</button></li>
    )
}

export default Item



